<template>
  <page>
    <div slot="body">
      <div class="table-operation">
        <el-button
          type="primary"
          size="small"
          icon="el-icon-plus"
          @click="openDialogHandle('Add', null)"
        >
          添加角色
        </el-button>
      </div>
      <el-table :data="tableData" border>
        <el-table-column
          align="center"
          label="序号"
          type="index"
          width="50px"
        ></el-table-column>
        <el-table-column
          prop="a"
          label="角色ID"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="a"
          label="角色名称"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="a"
          label="关联账号数"
          align="center"
        ></el-table-column>
        <el-table-column prop="a" label="备注" align="center"></el-table-column>
        <el-table-column label="操作" align="center" width="180px">
          <template>
            <el-link type="primary" :underline="false">编辑</el-link>
            <el-link type="primary" :underline="false">编辑权限</el-link>
            <el-link type="primary" :underline="false" @click="deleteHandle"
              >删除</el-link
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div slot="footer">
      <el-pagination
        background
        :page-size="pageVO.pageSize"
        :current-page.sync="pageVO.pageNum"
        :total="pageVO.total"
        :layout="pageOptions.layout"
        :page-sizes="pageOptions.pageSizes"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <role-dialog ref="dialogRef" />
  </page>
</template>

<script>
import pageQuery from "../mixins/pageQuery";
import roleDialog from "./roleDialog.vue";
export default {
  mixins: [pageQuery],
  components: { roleDialog },
  methods: {
    deleteHandle() {
      this.$confirm("确认删除？", "提示", {
        type: "warning",
      }).then((res) => {
        this.$message({
          type: "success",
          message: " 删除成功",
        });
      });
    },
  },
};
</script>

<style></style>
